<template>
  <el-menu-item
    v-if="!item.children"
    :index="item.name"
    @click="clickTroops(item)"
    style="display: flex"
  >
    <i class="iconfont icon-yonghu" v-if="isCollapse"></i>
    <span class="span" :class="{ active: route.meta.name == item.meta.name }">
      <img
        src="@/assets/imgs/login/u1916.png"
        alt=""
        v-if="item.path !== 'home' && !isCollapse"
      />

      <span>
        {{ item.meta.name }}
      </span>
    </span>
  </el-menu-item>

  <el-sub-menu v-else :index="item.name">
    <template #title>
      <i class="iconfont icon-yonghu" v-if="isCollapse"></i>
      <!--  @click="clickTroops(item)" -->
      <span> {{ item.meta.name }} </span>
    </template>

    <div :class="isCollapse ? '' : 'noch'">
      <s-menu
        v-for="ele in item.children"
        :key="ele.name"
        :item="ele"
        @clickTroops="clickTroops"
      />
    </div>
  </el-sub-menu>
</template>
<script setup>

import { RouterView } from "vue-router";
import { ref, onMounted, onUnmounted, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
import { useStore } from "vuex";
let emigFun = defineEmits(["clickTroops"]);
const store = useStore();
const isCollapse = computed(() => {
  return store.state.head.isCollapse;
});

defineProps(["item"]); //父组件向子组件传递的数据
const clickTroops = (item) => {
 
  emigFun("clickTroops", item);
};
defineOptions({
  name: "SMenu", //组件命名
});
const goPath = (name) => {
  console.log(name);
  router.push({ name: name });
};

onMounted(() => {});
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
</script>
<style scoped lang="scss">
.el-menu-item {
  background-color: #cccccc !important;
  padding-left: 10px !important;
  border-bottom: 1px solid #fff !important;
  border-radius: 5px;
}

:deep() {
  .el-menu-item {
    background-color: #cccccc !important;
    border-radius: 5px;
  }

  .el-sub-menu {

  }
  .el-sub-menu__title {
    border-radius: 5px;
    // width: 110%;
    padding: 0 10px;
    background: #cccccc !important;
    margin: 2px 0;
    border-bottom: 1px solid #fff !important;
    // margin-left: -1%;
    // left: -5%;

    box-sizing: border-box;
  }
  .noch {
    box-sizing: content-box;
    display: flex;
    flex-wrap: wrap;
    .el-menu-item {
      border-radius: 5px;
      margin: 5px 8px;
      flex-shrink: 0;
      width: 70px;
      height: 70px;
      margin-bottom: 10px;
      background: #cccccc !important;
      padding-left: 0 !important;
      padding: 0;
      .span {
        border-radius: 5px;
        height: 70px;
        display: inline-block;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid #fff;
        span {
          display: block;
          width: 100%;
          height: 20px;

          text-align: center;
          line-height: 20px;
        }
        img {
          width: 30px;
          height: 30px;
        }
      }
      .active {
        background: #fff !important;
        color: #409EFF;
      }
    }
  }
  .el-sub-menu {
    width: 100%;
    // border-bottom: 1px solid #fff !important;
  }
  .el-menu,
  .el-menu--inline {
    width: 100%;

    padding: 0 !important;
  }
}
</style>
